<template>
	<!-- 全真模拟-在线组卷-手动组卷【设置题型】 -->
	<view>
		<u-navbar back-icon-color="#fff" :customBack="saveBack" :isFixed="true" :border-bottom="false" title="发布通知" title-color="#FFFFFF">
		</u-navbar>
		<view class="form-item">
			<view class="title">
				<text>通知学生</text>
			</view>
			<view class="input-container" @click="setStudent">
				<input type="text" v-model="student" disabled placeholder="选择通知学生" />
				<my-icon name="bd-next"></my-icon>
			</view>
		</view>
		<view class="form-item">
			<view class="title">
				<text>通知标题</text>
			</view>
			<view class="input-container">
				<input type="text" @click="keyBord" @focus="keyBord"  v-model="noticeTitle"  placeholder="输入通知标题" />
			</view>
		</view>
		<view class="form-item">
			<view class="title">
				<text>输入通知内容</text>
			</view>
			<view class="input-container">
				<textarea type="text" @click="keyBord" @focus="keyBord"  v-model="noticeContent"  placeholder="请输入通知内容"></textarea>
			</view>
		</view>
		<view class="button confirm" @click="submit" shape="circle">发布</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			student:'',//选择的学生
		  noticeTitle:'',//通知标题
			noticeContent:'',//通知内容
			sess:'',//存储
			flag : true//跳转节流
		};
	},
	onLoad({status}) {
		if(status){
				this.getSess()
		}
	},
	methods: {
		setStudent(){
			//选择学生
			if(this.flag){
				this.flag = false//设置节流，否则快速点击会多次跳转
				setTimeout(() => {
					uni.navigateTo({
						url:'../../exam/examSelectStudent?type=1'
					}) 
					this.flag = true
				},300)
			}
			
		},
		keyBord() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		getSess(){
			//获取存储的学生信息
			this.sess=uni.getStorageSync('examStorage')
			//先将字串转成数组判断长度
			let studentName = this.sess.studentName.split(',')
			if(studentName.length < 6){
				this.student=this.sess.studentName.replace(/,/g,"、")
			} else {
				//超出长度截取，拼接字符串
				let studentNameLength = studentName.length
				let student = studentName.splice(0,5).join('、') + `等${studentNameLength}人`
				this.student = student
			}
			
		},
		saveBack(){
			uni.redirectTo({
				url:'myNotic'
			})
		},
		submit() {
			if(this.noticeTitle && this.noticeContent && this.student){
				const pageData={
					studentid:this.sess.studentlist,
					state:1,
					name:this.noticeTitle,
					content:this.noticeContent
				}
				return new Promise((resolve, reject) => {
					this.request
						.post('/app/teacher/notice/releaseNotice',pageData)
						.then(res => {
							uni.showToast({
								icon: 'success',
								title: '发布成功！'
							});
							uni.redirectTo({
								url:'myNotic'
							})
							resolve();
						})
						.catch(reject);
				});
			}else{
				let noticeTit='信息不能为空'
				if(!this.student){
					noticeTit='请选择学生'
				}else if(!this.noticeTitle){
					noticeTit='请输入通知标题'
				}else if(!this.noticeContent){
					noticeTit='请输入通知内容'
				}
				uni.showToast({
					icon: 'none',
					title: noticeTit
				});
			}
		},
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss">
.confirm {
font-size: 30upx;
	font-weight: 400;
	background: $linear-bg;
	border: none;
	color: #ffffff;
	width:350upx;
	height: 76upx;
	margin: 0 auto;
	text-align: center;
	border-radius: 76upx;
	line-height: 76upx;
	margin-top: 115upx;
}
.title {
	line-height: 100upx;
	height: 100upx;
	font-size: 30upx;
	font-weight: 400;
	color: #636874;
	text:last-child {
		color: #636874;
	}
}
.form-item > * {
	padding: 0 30upx;
}
.input-container {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	textarea{
		width: 100%;
		height: 380upx;
		margin: 30upx 0;
		color: #363940;
	}
	input {
		height: 110upx;
		font-size: 32upx;
		text-align: left;
		position: relative;
		flex: 1;
		color: #363940;
	}
	.icon-bd-next{
		color: #CCC;
	}
}
 .uni-textarea-placeholder, .uni-input-placeholder{
	 color: #A9ABB0;
 }
</style>
